<template>
    <TabGrayEasyCard :title="'品牌监控'" @onMore="goDetail(props.permi)" :tabs="card.tabs" :curTab="card.curTab"
        :tabRight="card.tabRight" @onChange="changeTab" :grayCardList="card.grayCardList" :lineText="''" :barText="''"
        :unitText="`单位：${card.unitText}`" :updateText="card.updateText"
        v-btnPermi="{ permi: props.permi, noReport: true, isHiden: true, hideList: props.hideList }">

        <slot>
            <el-table :data="card.tableData" height="100%" :cell-class-name="getCellClassName">
                <el-table-column label="品牌" prop="brand_name" :align="'left'" min-width="90" show-overflow-tooltip />
                <el-table-column label="租赁面积" :align="'right'">
                    <template #default="scope">
                        {{ toThousands(scope.row.user_area) }}
                    </template>
                </el-table-column>
                <el-table-column label="销售额" :align="'right'">
                    <template #default="scope">
                        {{ toThousands(scope.row.avg_day_sales) || '-' }}
                    </template>
                </el-table-column>
                <el-table-column label="月坪效" :align="'right'">
                    <template #default="scope">
                        {{ toThousands(scope.row.avg_monthly_sales_per_sqm) || '-' }}
                    </template>
                </el-table-column>
                <el-table-column label="租售比" :align="'right'">
                    <template #default="scope">
                        <span
                            :class="{ 'zs-text-red': scope.row.first_sales_rate_color == 1, 'zs-text-green': scope.row.first_sales_rate_color == 3 }">{{
                                scope.row.avg_rental_sales_ratio }}</span>
                    </template>
                </el-table-column>
            </el-table>
        </slot>
    </TabGrayEasyCard>
</template>

<script setup>
import TabGrayEasyCard from '@/DbComponents/tabGrayEasyCard'
import { toThousands } from '@/utils/number-util'
import { brandMonitoringListApi, highTentalToSalesRatioCardApi } from '@/api/Manage/Business/dashBoard'
import { reactive, watch, computed } from 'vue'
import { reportLog } from '@/utils/reportLog'
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
let { updateDate, tabPermi } = route.query
const props = defineProps({
    permi: {
        type: String,
        required: false,
        default: ''
    },
    hideList: {
        type: Array,
        required: false,
    },
    biProjectCode: {
        type: String,
        required: false,
        default: ''
    }
})
const card = reactive(
    {
        tabs: [{ label: '新开业', value: '1' }, { label: '租售比', value: '2' }],
        curTab: '1',
        tabRight: '',
        grayCardList: [{ label: '新开业', value: '', unit: '个', color: '' }, { label: '监控', value: '', unit: '个', color: '' },],
        unitText: '㎡；万元；元/㎡/月',
        updateText: '',
        tableData: [],
        startDate: '',
        endDate: '',
    }
)
const getCardData = (value) => {
    if (value == '1') {
        brandMonitoringListApi(props.biProjectCode).then((res) => {
            if (res.data.code == 200) {
                card.tabRight = res.data.data.yearmonth
                card.grayCardList[0].value = toThousands(res.data.data.newlyOpenedCount)
                card.grayCardList[1].value = toThousands(res.data.data.monitorCount)
                card.tableData = res.data.data.dataList
            }
        })
    } else if (value == '2') {
        highTentalToSalesRatioCardApi(props.biProjectCode).then((res) => {
            if (res.data.code == 200) {
                card.tabRight = res.data.data.yearmonth
                card.grayCardList[0].value = toThousands(res.data.data.hightCount)
                card.grayCardList[1].value = toThousands(res.data.data.normalCount)
                card.tableData = res.data.data.dataList
            }
        })
    }

}

// { row, column, rowIndex, columnIndex }
const getCellClassName = ({ row, column, columnIndex }) => {
    // 最后一列变色 需要改
    if (columnIndex == 4 && row[column] == 2) {
        return 'zs-text-green'
    }
    if (columnIndex == 4 && row[column] == 1) {
        return 'zs-text-red'
    }
}

const goDetail = (permi) => {
    reportLog({
        type: 4,
        resourceKey: permi,
    })
    router.push({
        path: '/page/routeController/index',
        query: {
            rid: 'Manage/Business/newOpenBrand',
            rTitle: card.curTab == '1' ? '品牌监控-新开业明细表' : '品牌监控-租售比明细表',
            biProjectCode: props.biProjectCode,
            dataTime: updateDate,
            resourceKey: tabPermi,
            pageType: card.curTab,
        },
    })
}
const changeTab = (value) => {
    // 切换tab
    if (value == '1') {
        card.grayCardList[0].label = '新开业'
        card.grayCardList[1].label = '监控'
    }
    if (value == '2') {
        card.grayCardList[0].label = '高租售比'
        card.grayCardList[1].label = '正常'
    }
    card.curTab = value
    getCardData(value)
}

const biProjectCode = computed(() => {
    return props.biProjectCode
});
watch(biProjectCode, () => {
    getCardData(card.curTab)
}, { deep: true, immediate: true });
</script>

<style scoped lang="scss"></style>
